<template>
  <div>
    <el-card style="margin:5px;height: 70px;">
      <el-form inline="inline">
        <el-form-item label="客户名">
          <el-input v-model="searchSession.custName" @keydown.enter.prevent="loadSession" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="客服名">
          <el-input v-model="searchSession.csName" @keydown.enter.prevent="loadSession" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="会话状态">
          <el-select v-model="searchSession.status" @change="loadSession" placeholder="请选择" style="width: 120px;">
            <el-option label="已分配" :value="1"></el-option>
            <el-option label="未分配" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评价星级">
          <el-select v-model="searchSession.starRating" @change="loadSession" placeholder="请选择" style="width: 120px;">
            <el-option label="一星" :value="1"></el-option>
            <el-option label="二星" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSession">重置</el-button>
          <el-button type="primary" @click="loadSession">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:5px;">
      <div style="margin: 10px 0px 40px 10px;">
        会话列表
        <el-button @click="addSession" type="primary" style="float:right;margin-top: -3px;">新增会话</el-button>
      </div>
      <div>
        <el-table :data="sessionArr">
          <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
          <el-table-column prop="custName" label="客户名" align="center"></el-table-column>
          <el-table-column prop="csName" label="客服名" align="center"></el-table-column>
          <el-table-column  prop="status" label="状态" align="center"></el-table-column>
          <el-table-column  prop="starRating" label="评价星级" align="center"></el-table-column>
          <el-table-column  prop="createTime" label="创建时间" align="center"></el-table-column>
          <el-table-column  prop="updateTime" label="更新时间" align="center"></el-table-column>
          <el-table-column  prop="endTime" label="结束时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button @click="editeSession(scope.row)" link type="primary" size="small">编辑</el-button>
              <el-button @click="showMessage(scope.row)" link type="primary" size="small">查看详情</el-button>
              <el-button @click="delSession(scope.row.id)" link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog :title="sessionDialogTitle" v-model="sessionDialogVisible"
               :close-on-click-modal="false" style="width:800px;padding:40px;">
      <el-form label-position="top" label-width="80px">
        <el-form-item label="客户名">
          <el-input v-model="saveCust.username" @blur="checkInsert" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="客服名">
          <el-select v-model="session.csId" placeholder="请输入">
            <el-option v-for="item in csArr" :label="item.username" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="session.status" placeholder="请选择">
            <el-option label="已分配" :value="1"></el-option>
            <el-option label="未分配" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评价星级">
          <el-select v-model="session.starRating" placeholder="请选择">
            <el-option label="空" value=""></el-option>
            <el-option label="一星" value="1"></el-option>
            <el-option label="二星" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleCloseSession">取消</el-button>
        <el-button @click="saveSession" type="primary" :disabled="saveDisable">保存</el-button>
      </template>
    </el-dialog>

    <el-dialog title="会话详情" v-model="messageDialogVisible"
               :close-on-click-modal="false" style="width:70%;padding:40px;">
      <el-card>
        <el-form inline="inline">
          <el-form-item>
            <el-input v-model="searchMessage.message" @keydown.enter.prevent="loadMessage" placeholder="搜索聊天记录"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="custMessage" type="primary">显示客户信息</el-button>
            <el-button @click="csMessage" type="primary">显示客服信息</el-button>
            <el-button @click="resetMessage" type="primary">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <el-button @click="delMessage" type="primary">批量删除</el-button>
        <el-table :data="messageArr" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
          <el-table-column prop="custName" label="客户名" align="center"></el-table-column>
          <el-table-column prop="csName" label="客服名" align="center"></el-table-column>
          <el-table-column  prop="message" label="消息" align="center"></el-table-column>
          <el-table-column  prop="createTime" label="发送时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button @click="delMessage(scope.row.id)" link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const searchSession=ref({})
const searchMessage=ref({})
const sessionArr=ref([])
const messageArr=ref([])
const session=ref({})
const message=ref({})
const sessionDialogVisible=ref(false)
const sessionDialogTitle=ref()
const messageDialogVisible=ref(false)

const csArr=ref([])
const loadCsArr = () => {
  let searchCs={deptId:55}
  axios.post(BASE_URL+'/v1/employee/select',searchCs)
      .then((response)=>{
        if (response.data.code==2000){
          csArr.value=response.data.data
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}

const resetSession = () => {
  searchSession.value={}
  loadSession()
}
const loadSession = () => {
  axios.post(BASE_URL+'/v1/webSessionMessage/session/select',searchSession.value)
      .then((response)=>{
        if (response.data.code==2000){
          sessionArr.value=response.data.data
          console.log(sessionArr.value)
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
onMounted(()=>loadSession(),loadCsArr())

const saveCust=ref({})
const saveDisable=ref(true)
const checkInsert = () => {
  axios.get(BASE_URL+'/v1/customer/select/'+saveCust.value.username)
      .then((response)=>{
        if (response.data.code==2000){
          saveCust.value=response.data.data
          saveDisable.value=false
        }else {
          ElMessage.error("输入的客户名错误")
          saveDisable.value=true
        }
      })
}
const addSession = () => {
  saveCust.value={}
  session.value={}
  sessionDialogVisible.value=true
  sessionDialogTitle.value="新增会话"
}
const editeSession = (row) => {
  saveCust.value={username:row.custName,id:row.custId}
  session.value=row
  loadSession()
  sessionDialogVisible.value=true
  sessionDialogTitle.value="编辑会话信息"
}
const saveSession = () => {
  if (confirm("确认保存吗")){
    session.value.custId=saveCust.value.id
    console.log(session.value)
    axios.post(BASE_URL+'/v1/webSessionMessage/session/save',session.value)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("保存成功")
            sessionDialogVisible.value=false
            loadSession()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const delSession = (id) => {
  if (confirm("确定要删除吗")){
    axios.delete(BASE_URL+'/v1/webSessionMessage/session/delete/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            loadSession()
          }else{
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const handleCloseSession = () => {
  if (confirm("确认要关闭窗口吗")){
    sessionDialogVisible.value=false
  }
}

let showSession={}
const showMessage = async (row) => {
  showSession=row
  searchMessage.value.sessionId=showSession.id
  messageDialogVisible.value=true
  await loadMessage()
}
const resetMessage = () => {
  searchMessage.value={sessionId:showSession.id}
  loadMessage()
}
const loadMessage = async () => {
  await axios.post(BASE_URL+'/v1/webSessionMessage/message/select',searchMessage.value)
      .then((response)=>{
        if (response.data.code==2000){
          messageArr.value=response.data.data
          searchMessage.value={sessionId:showSession.id}
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const csMessage = () => {
  searchMessage.value={sessionId:showSession.id}
  loadMessage().then(()=>{
    messageArr.value=messageArr.value.filter(item=>item.csId!=null)
  })
}
const custMessage = () => {
  searchMessage.value={sessionId:showSession.id}
  loadMessage().then(()=>{
    messageArr.value=messageArr.value.filter(item=>item.custId!=null)
  })
}

const delMessageIds = []
const handleSelectionChange = (val) => {
  delMessageIds.splice(0,delMessageIds.length,...val.map(item=>item.id))
}
const delMessage = (id) => {
  let ids
  if (typeof id==="number"){
    ids=[id]
  }else {
    ids=delMessageIds
  }
  if (confirm("确定要删除吗")){
    axios.delete(BASE_URL+'/v1/webSessionMessage/message/delete', {data:ids})
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            loadMessage()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }

}

</script>

<style scoped>

</style>